<header id="navigation" class="p-navigation"
  {% if webapp_config['STORE_BRAND'] and webapp_config['STORE_BRAND']['COLOUR'] %}
    style="background: {{ webapp_config['STORE_BRAND']['COLOUR'] }}"
  {% endif %}>
  <div class="row">
    <div class="p-navigation__banner">
      <div class="p-navigation__logo">
        <a class="p-navigation__link" href="/">
          {% if webapp_config['STORE_BRAND'] and webapp_config['STORE_BRAND']['LOGO'] %}
            <img class="p-navigation__image" src="{{ webapp_config['STORE_BRAND']['LOGO'] }}" alt="{{ webapp_config['STORE_NAME'] }}" />
            {% if webapp_config['STORE_BRAND'] and webapp_config['STORE_BRAND']['LOGO_TEXT'] %}
              &nbsp;<h3 style="margin-top: 5px">{{ webapp_config['STORE_BRAND']['LOGO_TEXT'] }}</h3>
            {% endif %}
          {% else %}
            {{ webapp_config['STORE_NAME'] }}
          {% endif %}
        </a>
      </div>
      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
    </div>
    <nav class="p-navigation__nav">
      <span class="u-off-screen">
        <a href="#main-content">Jump to main content</a>
      </span>
      {% if webapp_config['STORE_LINKS'] %}
        <ul class="p-navigation__links" role="menu">
          {% for link in webapp_config['STORE_LINKS'] %}
            <li class="p-navigation__link" role="menuitem">
              <a class="p-link--external" href="{{ link['href'] }}">{{ link['title'] }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </nav>
  </div>
</header>
